window.onload = function () {

  var flayer = window.flayer = new Datatang.FeatureLayer()
  var flayer2 = new Datatang.FeatureLayer()
  var extent = [0, 0, 2783, 2125];
  flayer2.style = function () {
    return [new Datatang.PointStyle(12, [0, 153, 255], 1, new Datatang.LineStyle([0, 153, 255], 1, 1), 0, 0, 0, "x")]
  }
  window.Datatang = Datatang;
  document.oncontextmenu = function () {
    return false;
  };
  map = new Datatang.Map({
    layers: [
      new Datatang.SingleImageLayer({
        url: 'source/China_map.jpg',
        imageExtent: extent,
        projection: {
          extent: extent
        }
      }),
      flayer,
      flayer2
    ],
    target: 'map',
    view: new Datatang.View({
      projection: {
        extent: extent
      },
      center: Datatang.ExtentUtil.getCenter(extent),
      resolution: 2,
      resolutions: [4, 2, 1, 0.5, 0.25, 0.125, 0.0625, 0.03125]
    })
  });

  // 绘图工具
  var drawTool = new Datatang.Draw({
    type: 'cube',
    drawLayer: flayer,
    longPress: true,
    // freehand: true,
  })
  // var drawTool2 = new Datatang.Draw({
  //   type: 'point',
  //   drawLayer: flayer2
  // })
  let selectTool = window.selectTool = new Datatang.Select({
    selectMultiMode(event) {
      return event.keyCode == 17;
    },
    selectMode: ["click"]
  });
  selectTool.addEventListener(
    Datatang.SelectEvent.EventType.SELECT, function (e) {
      modifyTool.features = e.selectedFeatures;

    })
  selectTool.true = false;
  let modifyTool = window.modifyTool = new Datatang.Modify({
    // edgeEditableCondition: function() {
    //   return false;
    // }
  });
  map.addComponents(selectTool)
  map.addComponents(drawTool)
  map.addComponents(modifyTool)
  var dragPan = map.components[0];
  dragPan._condition = browserEvent => {
    var originalEvent = browserEvent.originalEvent;
    if (originalEvent.button === 0) {
      return false;
    }
    return (
      !originalEvent.altKey &&
      !(originalEvent.metaKey || originalEvent.ctrlKey) &&
      !originalEvent.shiftKey
    );
  };
  // map.addComponents(drawTool2)
  drawTool.active = false;
  // drawTool2.active = true;
  var typeSelect = document.getElementById('type')

  /**
   * Handle change event.
   */
  typeSelect.onchange = function () {
    drawTool.drawMode = typeSelect.value
  }
  var change = document.getElementById("change");
  change.onclick = function () {
    if (drawTool.active) {
      selectTool.active = true;
      drawTool.active = false;
    } else {
      drawTool.active = true;
      selectTool.active = false;
    }
  }

  drawTool.addEventListener(Datatang.DrawEvent.EventType.DRAW_END, function (e) {
    var feature = e.feature;
  })
}
